<template>
  <div class="flowbar-charts-components">
    <div class="flowbar-charts-wrapper">
      <chart :options="computedBarChartOption"
             :init-options="initOptions"
             :theme="theme"
             auto-resize
             class="echarts-item"
             ref="domBarChart">
      </chart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/graphic'
import 'echarts/lib/chart/bar'
import options from './echartsOptions.js'

const DEFAULT_TIME_UNIT = '时'

export default {
  name: 'flowbar-charts-components',

  components: {
    chart: ECharts
  },

  props: {
    startTime: {
      type: Number,
      default: 0
    },
    endTime: {
      type: Number,
      default: 24
    },
    barData: {
      default: null
    }
  },

  data () {
    return {
      options,
      theme: 'dark',
      initOptions: {
        renderer: 'canvas'
      },
      barChartSize: {}
    }
  },

  computed: {
    computedBarChartOption () {
      let initOptions = options
      if (this.barData && this.barData.some((item) => item !== 0)) {
        let timeFrame = []
        for (var i = this.endTime; i >= this.startTime; i--) {
          const label = i + DEFAULT_TIME_UNIT
          timeFrame.unshift(label)
        }
        initOptions.xAxis.show = true
        initOptions.xAxis.data = timeFrame
        initOptions.series[0]['data'] = this.barData
      } else {
        initOptions.xAxis.show = false
        initOptions.xAxis.data = []
        initOptions.series[0]['data'] = []
      }
      /**
       * [if description] 如果没有图表数据的时候, 显示tooltip
       * @param  {Number} initOptions.series[0]['data'].length [description]
       */
      initOptions.graphic[0]['style']['fill'] = (initOptions.series[0]['data'].length === 0) ? '#000' : 'transparent'
      return initOptions
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .flowbar-charts-components {
    height: 100%;
    overflow: hidden;
    .flowbar-charts-wrapper {
      position: relative;
      height: 100%;
      // .chart-title {
      //   box-sizing: border-box;
      //   padding-left: 30px;
      //   font-size: 14px;
      //   line-height: 30px;
      // }
      .echarts-item {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }
  }
</style>
